<template>
    <div class="banner">
        <el-carousel height="400px">
            <el-carousel-item v-for="item in bannerlist">
                <img :src='item.image' alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
    import Header from "@/components/Header";
    import Banner from "@/components/Banner";
    import Footer from "@/components/Footer";

    export default {
        name: "Banner",
        data() {
            return {
                bannerlist: []
            }
        },
        created() {
            this.$axios(this.$settings.banner).then(
                res => {
                    if (res.data.code == 100) {
                        this.bannerlist = res.data.results
                    } else {

                    }
                }
            )
        },
        components: {
            Header,
            Footer,
            Banner,
        }
    }
</script>

<style scoped>
    .el-carousel__item {
        height: 400px;
        min-width: 1200px;
    }

    .el-carousel__item img {
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }
</style>
